<template>
	<view>
		<view :style="{height: (statusBarHeight) + 'px'}"></view>
		<view class="upper" :style="{height: (navigationBarHeight ) + 'px'}">
			<image class="iconImg" @click="GoBack()" src="https://img.wilmer.com.cn/admin/2024/3-25/Rectangle%2071.png"
				mode=""></image>
			<view class="conter_box">AI智能选校</view>
		</view>
		<!-- 问答记录 -->
		<view class="matter">
			<view class="box fade_in" :class="{'greenBox':item.state == 2}" v-for="(item,index) in list" :key="index">
				{{item.name}}
			</view>
		</view>
		<!-- 问答区域 -->
		<view class="Qs" :style="{bottom: safeArea + 'px'}" :class="{'fade_out':fadeState,'fade_bottom_in':!fadeState}">
			<view class="qs_nav" v-for="(item,index) in qsList" :key="index" @click="onclick(item)"
				v-if="Serial_Number <= 4">
				{{item.label}}
			</view>
			<!-- 文本 -->
			<view class="Qs_version" v-if="Serial_Number > 4">
				<u--input placeholder="请输入内容" border="surround" v-model="achievement" :type='dataType
						? "number" :"digit"' @input="bindTextAreaBlur()"></u--input>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		onMounted
	} from "vue";
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				navigationBarHeight: 44, // 导航栏高度
				safeArea: 0, // 底部安全距离

				Serial_Number: 0,
				fadeState: false, // 问答淡出动画
				achievement: "", // 成绩
				dataType: true, // true：整数  false：浮点数
				ExamType: '', // 用户选中的考试类型


				list: [{
					state: '1', // 1 问题 2用户回答
					name: "留学目的地？",
				}], // 渲染对话数据

				qsList: [{
					value: "英国",
					label: "英国"
				}, {
					value: "澳大利亚",
					label: "澳大利亚"
				}, {
					value: "新西兰",
					label: "新西兰"
				}, {
					value: "美国",
					label: "美国"
				}, {
					value: "中国香港",
					label: "中国香港"
				}, {
					value: "新加坡",
					label: "新加坡"
				}, {
					value: "加拿大",
					label: "加拿大"
				}, {
					value: "马来西亚",
					label: "马来西亚"
				}, {
					value: "中国澳门",
					label: "中国澳门"
				}, {
					value: "爱尔兰",
					label: "爱尔兰"
				}]
			}
		},
		onShow() {
			// 获取顶部安全距离
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			// 获取底部安全距离
			let res = uni.getSystemInfoSync();
			this.safeArea = res.screenHeight - res.safeArea.bottom;
		},
		methods: {
			GoBack() {
				uni.switchTab({
					url: '/pages/school/index'
				})
			},
			onclick(item) {
				this.Serial_Number += 1
				this.list.push({
					state: '2',
					name: item.value,
				})
				this.fadeState = true
				setTimeout(() => {
					this.fadeState = false
				}, 2000)
				if (this.Serial_Number == 1) {
					this.list.push({
						state: '1',
						name: '目标学历？',
					})
					this.qsList = [{
						value: "本科",
						label: "本科"
					}, {
						value: "研究生",
						label: "研究生"
					}]
				} else if (this.Serial_Number == 2) {
					this.list.push({
						state: '1',
						name: '意向专业？',
					})
					this.qsList = [{
						value: "IT",
						label: "IT"
					}, {
						value: "商科",
						label: "商科"
					}, {
						value: "传媒",
						label: "传媒"
					}, {
						value: "法学",
						label: "法学"
					}, {
						value: "教育",
						label: "教育"
					}, {
						value: "其他",
						label: "其他"
					}]
				} else if (this.Serial_Number == 3) {
					this.list.push({
						state: '1',
						name: '出国时间？',
					})
					this.qsList = [{
						value: "今年",
						label: "今年"
					}, {
						value: "明年",
						label: "明年"
					}, {
						value: "两年后",
						label: "两年后"
					}]
				} else if (this.Serial_Number == 4) {
					this.list.push({
						state: '1',
						name: '雅思成绩或托福成绩？',
					})
					this.qsList = [{
						value: "雅思",
						label: "雅思"
					}, {
						value: "托福",
						label: "托福"
					}]
				} else if (this.Serial_Number == 5) {
					let temporarily = this.list[this.list.length - 1]
					this.ExamType = temporarily.name
					this.list.push({
						state: '1',
						name: temporarily.name == '雅思' ? '雅思成绩？' : "托福成绩?",
					})
				}
			},
			bindTextAreaBlur(index) {
				this.$nextTick(() => {
					// 雅思最大8分 托福最大120
					if (Number(this.achievement) > 10 && this.ExamType == '雅思') {
						uni.showToast({
							title: '雅思最高分数为10分 ',
							icon: 'none'
						})
						this.achievement = ''
						setTimeout(() => {
							this.$forceUpdate()
						}, 200)
					} else if (Number(this.achievement) > 120 && this.ExamType == '托福') {
						uni.showToast({
							title: '托福最高分数为120分 ',
							icon: 'none'
						})
						this.achievement = ''
						setTimeout(() => {
							this.$forceUpdate()
						}, 200)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: linear-gradient(179.95deg, #F2FEF2 -3.29%, #FFFFFF 99.96%);
	}
</style>

<style lang="scss" scoped>
	.upper {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.conter_box {
			font-family: PingFang SC;
			font-size: 40rpx;
			font-weight: 500;
			color: #333333;
		}

		.iconImg {
			width: 28rpx;
			height: 40rpx;
			position: absolute;
			left: 28rpx;
		}
	}

	.matter {
		width: calc(100% - 64rpx);
		margin: 30rpx auto 0;
		display: flex;
		flex-direction: column;

		.box {
			width: fit-content;
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 36rpx;
			color: #333333;
			padding: 38rpx 56rpx;
			background: #fff;
			border-radius: 0 20rpx 20rpx 20rpx;
			margin-top: 20rpx;
		}

		.greenBox {
			margin-left: auto;
			background: #95EC69;
			border-radius: 20rpx 20rpx 0 20rpx;
		}
	}

	.Qs {
		width: calc(100% - 64rpx);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		position: fixed;
		left: 32rpx;

		.qs_nav {
			width: 332rpx;
			height: 106rpx;
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			text-align: center;
			line-height: 106rpx;
			background: #F3FEF3;
			margin-top: 20rpx;
		}

		.Qs_version {
			width: 100%;
			height: 106rpx;
			display: flex;
			align-items: center;
		}
	}

	// 淡出动画
	.fade_out {
		animation: backOutDown;
		animation-duration: 2s; // 时间
		animation-iteration-count: 1; // 此行次数
	}

	// 淡入动画__问答内容
	.fade_in {
		animation: backInUp;
		animation-duration: 2s; // 时间
		animation-iteration-count: 1; // 此行次数
	}

	.fade_bottom_in {
		animation: backInUp;
		animation-duration: 1s; // 时间
		animation-iteration-count: 1; // 此行次数
	}
</style>